<template>
  <d2-container>
    <template slot="header">期权指令-修改</template>
    <div class="d2"></div>
    <el-card shadow="never" class="d2-mb titleline">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">基础信息</p>
      </template>
      <el-form
        class="filter-container"
        ref="egForm"
        :model="egForm"
        :rules="rules"
        label-width="110px"
      >
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="策略名称" prop="strategy_name">
              <el-input
                placeholder="请输入内容"
                disabled
                v-model="egForm.strategy_name"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="策略ID" prop="strategy_id">
              <el-input v-model="egForm.strategy_id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="指令类型" prop="command_type">
              <el-select
                v-model="egForm.command_type"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in command_type_datas"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="指令名称" prop="command_name">
              <el-input v-model="egForm.command_name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="指令ID" prop="command_id">
              <el-input
                placeholder="请输入内容"
                v-model="egForm.command_id"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="部门名称" prop="department_name">
              <el-select
                v-model="egForm.department_name"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in department_data"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="柜台账户" prop="real_account">
              <el-select
                v-model="egForm.real_account"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in options_gui"
                  :key="item.RealAccountCode"
                  :label="item.RealAccountName"
                  :value="item.RealAccountCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="子账户" prop="sub_account">
              <el-select
                v-model="egForm.sub_account"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in options_zi"
                  :key="item.LogicAccountCode"
                  :label="item.LogicAccountName"
                  :value="item.LogicAccountCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="交易员">
              <el-select
                v-model="egForm.trader"
                placeholder="请选择"
                style="width:100%;"
              >
                <el-option
                  v-for="item in options_user"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="指令开始日期" prop="start_date">
              <el-date-picker
                v-model="egForm.start_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="指令结束日期" prop="end_date">
              <el-date-picker
                v-model="egForm.end_date"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb titleline">
      <template slot="header" style="height:66px;">
        <span class="title_x el-button--primary fl"></span>
        <p class="title_l fl">交易信息</p>
      </template>
      <el-card shadow="never" class="d2-mb">
        <div>
          <el-button type="primary" size="small" @click="update_fn">
            保存
          </el-button>
          <el-button
            size="small"
            type="primary"
            @click="$router.push('/examine_historyss?id=' + egForm.workOrderID)"
          >
            审批历史
          </el-button>
        </div>
        <div style="margin-top:15px">
          <el-table
            :data="transactionData"
            border
            fit
            :row-class-name="tableRow"
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <!-- <el-table-column type="selection" width="40"> </el-table-column> -->
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="productName" label="品名">
              <template slot-scope="scope">
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.productName"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="instrument" label="合约" width="240px">
              <template slot-scope="scope">
                <!-- <el-input
                  size="small"
                  style="width: 70px"
                  v-model="scope.row.instrument"
                  disabled
                  placeholder="请输入内容"
                ></el-input>
                <el-button size="small" @click="select_fn(scope.row)"
                  >选择</el-button
                > -->
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.instrument"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="direction" label="方向" sortable>
              <template slot-scope="scope">
                <!-- <el-select v-model="scope.row.direction" placeholder="请选择">
                  <el-option
                    v-for="item in directionSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.direction"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="offset_flag" label="开/平" sortable>
              <template slot-scope="scope">
                <!-- <el-select v-model="scope.row.offset_flag" placeholder="请选择">
                  <el-option
                    v-for="item in kp"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.offset_flag"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="手数" sortable>
              <template slot-scope="scope">
                <el-input
                  type="number"
                  min="0"
                  size="small"
                  v-model="scope.row.volume"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="价格区间" width="240px">
              <template slot-scope="scope">
                <el-input
                  type="number"
                  min="0"
                  size="small"
                  style="width: 100px"
                  v-model="scope.row.min_price"
                  placeholder="最小值"
                ></el-input>
                --
                <el-input
                  size="small"
                  style="width: 100px"
                  type="number"
                  min="0"
                  v-model="scope.row.max_price"
                  placeholder="最大值
                "
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="commodity_unit" label="单位" sortable>
              <template slot-scope="scope">
                <!-- <el-select
                  v-model="scope.row.commodity_unit"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dw"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.commodity_unit"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="currency" label="币种" sortable>
              <template slot-scope="scope">
                <!-- <el-select v-model="scope.row.currency" placeholder="请选择">
                  <el-option
                    v-for="item in bz"
                    :key="item.id"
                    :label="item.name"
                    :value="item.symbol"
                  >
                  </el-option>
                </el-select> -->
                <el-input
                  size="small"
                  disabled
                  v-model="scope.row.currency"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" sortable>
              <template slot-scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row.remarks"
                  placeholder="请输入内容"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <!-- <el-button
        type="primary"
        size="small"
        style="float:right;margin:0 0 10px 10px;"
        @click="add_orders_fn"
      >
        保存
      </el-button> -->
    </el-card>
    <el-dialog
      title="策略明细"
      :visible.sync="dialogVisible_one"
      width="80%"
      :before-close="handleClose"
    >
      <el-table
        :data="dialogVisibleData"
        border
        @selection-change="handleCurrentChange_dialogVisible"
        class="d2-mb"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="type" label="类型" sortable></el-table-column>
        <el-table-column
          prop="productName"
          label="品名"
          sortable
        ></el-table-column>
        <el-table-column
          prop="instrument"
          label="合约"
          sortable
        ></el-table-column>
        <el-table-column
          prop="direction"
          label="方向"
          sortable
        ></el-table-column>
        <el-table-column
          prop="max_volume"
          label="最大手数"
          sortable
        ></el-table-column>
        <el-table-column
          prop="max_amount"
          label="最大数量"
          sortable
        ></el-table-column>
        <el-table-column
          prop="offset_flag"
          label="开/平"
          sortable
        ></el-table-column>
        <el-table-column
          prop="commodity_unit"
          label="单位"
          sortable
        ></el-table-column>
        <el-table-column prop="market" label="市场" sortable></el-table-column>
        <el-table-column
          prop="currency"
          label="币种"
          sortable
        ></el-table-column>
        <el-table-column
          prop="name.commodity_spot.brand"
          label="品牌"
          sortable
        ></el-table-column>
        <el-table-column
          prop="name.commodity_spot.origin"
          label="产地"
          sortable
        ></el-table-column>
        <el-table-column
          prop="name.commodity_spot.standard"
          label="规格"
          sortable
        ></el-table-column>
        <el-table-column
          prop="name.commodity_spot.attribute"
          label="主属性"
          sortable
        ></el-table-column>
        <el-table-column
          prop="name.remarks"
          label="备注"
          sortable
        ></el-table-column>
      </el-table>
      <el-row class="d2-mb">
        <el-button size="small" @click="dialogVisible_one = false"
          >取 消</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="submit_dialogVisible_fn(1)"
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </d2-container>
</template>

<script>
import {
  getStrategy_trade_info,
  getFutures_command_trade,
  getFutures_command_info,
  getDepartments,
  futures_command_info,
  return_account,
  getUsers,
  currency
} from "@/api/url";
export default {
  data() {
    return {
      rules: {
        strategy_name: [{ required: true, message: "", trigger: "change" }],
        strategy_id: [{ required: true, message: "", trigger: "change" }],
        command_type: [
          { required: true, message: "请选择指令类型", trigger: "change" }
        ],
        command_name: [
          { required: true, message: "请选择指令名称", trigger: "change" }
        ],
        department_name: [
          { required: true, message: "请选择部门名称", trigger: "change" }
        ],
        real_account: [
          { required: true, message: "请选择柜台账户", trigger: "change" }
        ],
        sub_account: [
          { required: true, message: "请选择子账户", trigger: "change" }
        ],
        start_date: [
          { required: true, message: "请选择开始日期", trigger: "change" }
        ],
        end_date: [
          { required: true, message: "请选择结束日期", trigger: "change" }
        ],
        command_id: [
          { required: true, message: "指令id不为空", trigger: "change" }
        ]
      },
      options_gui: [],
      options_zi: [],
      options_user: [],
      id_routers: this.$route.query.id,
      transactionData: [],
      storeData: {},
      egForm: {},
      dialogVisible_one: false,
      dialogVisible_two: false,
      dialogVisible_three: false,
      dialogVisibleData: [],
      currentRow: "",
      currentRow_dialogVisible: [],
      delete_selection: [],
      command_type_datas: [
        {
          value: 1,
          label: "普通指令"
        },
        {
          value: 2,
          label: "调整指令"
        },
        {
          value: 3,
          label: "移仓换月指令"
        }
      ],
      directionSelect: [
        {
          value: 0,
          label: "买入"
        },
        {
          value: 1,
          label: "卖出"
        }
      ],
      kp: [
        {
          value: 0,
          label: "开仓"
        },
        {
          value: 1,
          label: "平仓"
        }
        // {
        //   value: 3,
        //   label: "平今仓"
        // },
        // {
        //   value: 4,
        //   label: "平昨仓"
        // }
      ],
      bz: [],
      dw: [
        {
          value: 0,
          label: "吨"
        },
        {
          value: 1,
          label: "千克"
        },
        {
          value: 2,
          label: "桶"
        },
        {
          value: 3,
          label: "金属吨"
        },
        {
          value: 4,
          label: "风干吨"
        },
        {
          value: 5,
          label: "手"
        }
      ],
      options1: [
        {
          value: 1,
          label: "现货期货套期"
        },
        {
          value: 2,
          label: "现货现货套期"
        },
        {
          value: 3,
          label: "现货期权套期"
        },
        {
          value: 4,
          label: "期货期货套利"
        },
        {
          value: 5,
          label: "现货单边"
        },
        {
          value: 6,
          label: "期货单边"
        }
      ],
      index_s: null,
      department_data: []
    };
  },
  created() {
    currency().then(res => {
      this.bz = res.result.results;
    });
    this.select_gui_zi_fn();
    getDepartments().then(res => {
      var shujus = res.result;
      this.department_data = this.treeData(shujus);
    });
    var datas = {
      command_id: this.id_routers
    };
    getFutures_command_trade(datas).then(res => {
      this.transactionData = res.result.results;
      this.transactionData.forEach(item => {
        this.bz.forEach(bzitem => {
          if (item.currency == bzitem.symbol) {
            item.currency = bzitem.name;
          }
        });
      });
    });
    getFutures_command_info(datas).then(res => {
      this.egForm = res.result.results[0];
    });
  },
  methods: {
    // 树形菜单扁平化方法
    treeData(tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.sub_depart) {
          queen = queen.concat(first.sub_depart);
          delete first["sub_depart"];
        }
        out.push(first);
      }
      return out;
    },
    //柜台账户 子账号查询
    select_gui_zi_fn() {
      var dda = {
        account_type: "real"
      };
      var aab = {
        account_type: "logic"
      };
      return_account(dda).then(res => {
        this.options_gui = res.result;
      });
      return_account(aab).then(res => {
        this.options_zi = res.result;
      });
      getUsers().then(res => {
        this.options_user = res.result;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 单选
    handleCurrentChange_dialogVisible(val) {
      this.currentRow_dialogVisible = val;
    },
    submit_dialogVisible_fn(index) {
      if (this.currentRow_dialogVisible.length === 0) {
        this.$message({
          message: "请先选择策略明细",
          type: "warning"
        });
      } else if (this.currentRow_dialogVisible.length > 1) {
        this.$message({
          message: "单选",
          type: "warning"
        });
      } else {
        this.transactionData[
          this.index_s.index
        ].instrument = this.currentRow_dialogVisible[0].instrument;
        this.dialogVisible_one = false;
      }
    },
    select_fn(index) {
      var datas = {
        strategy_id: this.egForm.strategy_id
      };
      getStrategy_trade_info(datas).then(res => {
        this.dialogVisibleData = res.result;
        this.dialogVisibleData.forEach(item => {
          if (item.name != null) {
            item.name.commodity_spot = item.name.commodity_spot[0];
          }
          this.bz.forEach(bzitem => {
            if (item.currency == bzitem.symbol) {
              item.currency = bzitem.name;
            }
          });
        });
      });
      this.index_s = index;
      this.dialogVisible_one = true;
    },
    tableRow({ row, rowIndex }) {
      row.index = rowIndex;
    },
    update_fn() {
      this.$refs["egForm"].validate(valid => {
        if (valid) {
          let date111 = new Date(this.egForm.end_date).getTime();
          let date222 = new Date(this.egForm.start_date).getTime();
          if (date111 < date222) {
            this.$message({
              message: "请检测指令结束日期",
              type: "warning"
            });
            return;
          }
          this.egForm.strategy_id = this.egForm.strategy_id * 1;
          // var egForm_data = this.egForm;
          // this.department_data
          // egForm_data.status = 0;
          // egForm_data.command_type = 1;
          this.command_type_datas.forEach(iites => {
            if (this.egForm.command_type == iites.label) {
              this.egForm.command_type = iites.value;
            }
          });
          // if (this.egForm.status == "草拟") {
            this.egForm.status = 0;
          // } else if (this.egForm.status == "已驳回") {
          //   this.egForm.status = 2;
          // }
          var transactionData_agen = this.transactionData;
          transactionData_agen.forEach(item => {
            if (item.direction == "买入") {
              item.direction = 0;
            } else if (item.direction == "卖出") {
              item.direction = 1;
            }
            if (item.offset_flag == "开仓") {
              item.offset_flag = 0;
            } else if (item.offset_flag == "平仓") {
              item.offset_flag = 1;
            }
            // if (item.commodity_unit == "吨") {
            //   item.commodity_unit = 0;
            // } else if (item.commodity_unit == "千克") {
            //   item.commodity_unit = 1;
            // } else if (item.commodity_unit == "桶") {
            //   item.commodity_unit = 2;
            // } else if (item.commodity_unit == "立方米") {
            //   item.commodity_unit = 3;
            // } else if (item.commodity_unit == "张") {
            //   item.commodity_unit = 4;
            // } else if (item.commodity_unit == "克") {
            //   item.commodity_unit = 5;
            // }
            this.bz.forEach(bzitem => {
              if (bzitem.name == item.currency) {
                item.currency = bzitem.symbol;
              }
            });
            // this.bz.forEach(iiss => {
            //   if (iiss.symbol == item.currency) {
            //     item.currency = iiss.name;
            //   }
            // });
          });
          for (var as = 0; as < transactionData_agen.length; as++) {
            if (transactionData_agen[as].volume == "") {
              this.$message({
                message: "手数不能为空",
                type: "warning"
              });
              return;
            }
            if (
              transactionData_agen[as].max_price == "" ||
              transactionData_agen[as].min_price == ""
            ) {
              this.$message({
                message: "价格区间不能为空",
                type: "warning"
              });
              return;
            }
            if (transactionData_agen[as].productName == "") {
              this.$message({
                message: "品名不能为空",
                type: "warning"
              });
              return;
            }
            if (
              transactionData_agen[as].max_price * 1 <
              transactionData_agen[as].min_price * 1
            ) {
              this.$message({
                message: "价格区间左侧应小于等于右侧",
                type: "warning"
              });
              return;
            }
          }
          var datas = {
            operation: "MOD",
            command_info: this.egForm,
            trade_info: transactionData_agen
          };
          futures_command_info(datas)
            .then(res => {
              this.$message({
                message: res.result,
                type: "success"
              });
              this.$router.push("/hedging_strategy/order_management");
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
    // checkSelectable(row) {
    //   return row.type != "现货";
    // }
  }
};
</script>
<style lang="scss">
.resizeNone {
  .el-textarea__inner {
    //el_input中的隐藏属性
    resize: none; //主要是这个样式
  }
}
</style>
